<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册网易免费邮箱 - 中国第一大电子邮件服务商</title>
	<link rel="shortcut icon" href="statics/images/favicon.ico">
	<link rel="stylesheet" type="text/css" href="statics/css/main.css">

</head>
<body style="color:#555;">
    <header class="header">
    	<!--头部左边背景-->
    	<div class="bg"></div>
    	<!--头部右边链接-->
    	<div class="links">
    		<a href="#">了解更多|</a>
    		<a href="#">反馈意见</a>
    	</div>
    	
    </header>


    <section class="content">
    	<!--内容区头-->
    	<header class="content-tit">
    		<h1>欢迎注册无限容量的网易邮箱 ! 邮件地址可以登录使用其他网易旗下产品。</h1>
    	
         </header>

         <!--内容区体-->
         <div class="mainBody-wrapper">
         	<!--内容体左边区域-->
         	<div class="mainBody">
         	
            <!--Tab标签菜单-->

            <div class="regTabs">
            

                <ul>
                    <li><a herf="#" style="font-weight: bold;color:#fff;">注册字母邮箱</a></li>
                    <li><a href="#">注册手机号码邮箱</a></li>
                    <li><a href="#">注册VIP邮箱</a></li>
                </ul>
            </div>


        <!--注册字母邮箱-->
            
         <div class="regForm" id="tab0">

                <dl class="regForm-item">
                    <!--输入框前文本-->
                    <dt class="regForm-title">
                        <span class="txt-impt">*</span>邮件地址
                    </dt>

                    <dd class="regForm-ct">
                        <!--请输入文本框-->
                        <input type="text" class="ipt">
                        <strong style="font-weight: bold;font-size: 14px;">@</strong>
                        <select>
                            <option selected="selected">163.com</option>
                            <option>126.com</option>
                            <option>yeah.yet</option>
                        </select>

                        <!--请输入提示-->
                        <div class="tip">
                            <span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
                        </div>

                    </dd>
                </dl>

                
                 <dl class="regForm-item">
                                <!--输入框前文本-->
                <dt class="regForm-title">
                    <span class="txt-impt">*</span>密码
                </dt>

                <dd class="regForm-ct">
                    <!--请输入文本框-->
                    <input type="text" class="ipt" style="width:322px;">
                    
                 

                    <!--请输入提示-->
                    <div class="tip">
                        <span class="txt-tips">6~6个字符，区分大小写</span>
                    </div>

                </dd>
            </dl>

                <dl class="regForm-item">
                    <!--输入框前文本-->
                    <dt class="regForm-title">
                        <span class="txt-impt">*</span>确认密码
                    </dt>

                    <dd class="regForm-ct">
                        <!--请输入文本框-->
                        <input type="text" class="ipt" style="width:322px;">
                        
                     

                        <!--请输入提示-->
                        <div class="tip">
                            <span class="txt-tips">请再次填写密码</span>
                        </div>

                    </dd>
                </dl>

                
                <dl class="regForm-item">
                    <!--输入框前文本-->
                    <dt class="regForm-title">
                        <span class="txt-impt">*</span>手机号码
                    </dt>

                    <dd class="regForm-ct">
                        <!--请输入文本框-->
                        <input id="phone" type="text" class="ipt" style="width:286px;font-size:14px;font-weight:bold;padding-left:40px;" value="+86">
                        
                 

                     
                        <div class="itl">
                            <div class="itl-flag">
                                <em>&nbsp;</em>
                            </div>
                        </div>

                        <!--请输入提示-->
                        <div class="tip">
                            <span class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</span>
                        </div>

                        <!--下拉表选项-->
                        <div class="itlSelect" style="display:none;">

                            <a href="#" class="flag-CN"><em></em>中国 +86</a>

                              <a href="#" class="flag-AL"><em></em>阿尔巴尼亚(shqiperia) +355</a>

                              <a href="#" class="flag-DZ"><em></em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>

                              <a href="#" class="flag-AF" data-code="+93-"><em>&nbsp;</em>阿富汗(Republic of Afghanistan) +93</a>

                              <a href="#" class="flag-AR" data-code="+54-"><em>&nbsp;</em>阿根廷(Argentina) +54</a>

                              <a href="#" class="flag-AE" data-code="+971-"><em>&nbsp;</em>阿拉伯联合大公国(The United Arab Emirates) +971</a>

                              <a href="#" class="flag-AW" data-code="+297-"><em>&nbsp;</em>阿鲁巴(Aruba) +297</a>
                        </div>

                    </dd>
                </dl>
                




                <dl class="regForm-item">
                    <!--输入框前文本-->
                    <dt class="regForm-title">
                        <span class="txt-impt">*</span>验证码
                    </dt>

                    <dd class="regForm-ct">
                        <!--请输入文本框-->
                        <input type="text" class="ipt">

                        <img class="vCode" style="cursor:pointer;" src="statics/images/call.jpg" alt="验证码" width="120" height="50">

                        <a id="vcodeA" href="#" class="switchvCode">看不清楚？换张图片</a>
                        
                        
                      

                        <!--请输入提示-->
                        <div class="tip">
                            <span class="txt-tips">请填写图片中的字符，不区分大小写</span>
                        </div>

                        <div class="btns">
                            <a href="#" class="btn" onclick="">
                                <strong>免费获取验证码</strong></a>
                        </div>

                    </dd>
                </dl>

                  <dl class="regForm-item">
                        <!--输入框前文本-->
                        <dt class="regForm-title">
                            <span class="txt-impt">*</span>短信验证码
                        </dt>

                        <dd class="regForm-ct">
                            <!--请输入文本框-->
                            <input type="text" class="ipt" style="width:322px;">
                            
                         

                            <!--请输入提示-->
                            <div class="tip">
                                <span class="txt-tips">请查收手机短信，并填写短信中的验证码</span>
                            </div>

                        </dd>
                    </dl>
                


                <dl class="regForm-item">
                    <dd class="regForm-ct">
                        <label></label><input type="checkbox" checked="checked" > <sapn style="font-size:12px;">同意</sapn><a href="#">"服务条款"</a><span style="font-size:12px;">和</span><a href="#" >"隐私权相关政策"</a>
                       
                    </dd>
                </dl>

            
               <dl class="regForm-item">
                    <dd class="regForm-ct">
                        <a id="mainRegA" href="" onclick="" class="btnReg">立即注册</a>
                        <a id="mainRegA_d" href="#" class="btnRegDisable" style="display:none">立即注册</a>
                    </dd>
                </dl>

              </div>




          <!--注册手机号码邮箱-->
          <div class="regForm" id="tab1" style="display:none;">

            <dl class="regForm-item">
                <!--输入框前文本-->
                <dt class="regForm-title">
                    <span class="txt-impt">*</span>邮件地址
                </dt>

                <dd class="regForm-ct">
                    <!--请输入文本框-->
                    <input type="text" class="ipt">
                    <strong style="font-weight: bold;font-size: 14px;">@</strong>
                    <select>
                        <option selected="selected">163.com</option>
                        <option>126.com</option>
                        <option>yeah.yet</option>
                    </select>

                    <!--请输入提示-->
                    <div class="tip">
                        <span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
                    </div>

                </dd>
            </dl>

            
             <dl class="regForm-item">
                            <!--输入框前文本-->
            <dt class="regForm-title">
                <span class="txt-impt">*</span>密码
            </dt>

            <dd class="regForm-ct">
                <!--请输入文本框-->
                <input type="text" class="ipt" style="width:322px;">
                
             

                <!--请输入提示-->
                <div class="tip">
                    <span class="txt-tips">6~6个字符，区分大小写</span>
                </div>

            </dd>
        </dl>

            <dl class="regForm-item">
                <!--输入框前文本-->
                <dt class="regForm-title">
                    <span class="txt-impt">*</span>确认密码
                </dt>

                <dd class="regForm-ct">
                    <!--请输入文本框-->
                    <input type="text" class="ipt" style="width:322px;">
                    
                 

                    <!--请输入提示-->
                    <div class="tip">
                        <span class="txt-tips">请再次填写密码</span>
                    </div>

                </dd>
            </dl>

            
            <dl class="regForm-item">
                <!--输入框前文本-->
                <dt class="regForm-title">
                    <span class="txt-impt">*</span>手机号码
                </dt>

                <dd class="regForm-ct">
                    <!--请输入文本框-->
                    <input id="phone" type="text" class="ipt" style="width:286px;font-size:14px;font-weight:bold;padding-left:40px;" value="+86">
                    
             

                 
                    <div class="itl">
                        <div class="itl-flag">
                            <em>&nbsp;</em>
                        </div>
                    </div>

                    <!--请输入提示-->
                    <div class="tip">
                        <span class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</span>
                    </div>

                    <!--下拉表选项-->
                    <div class="itlSelect" style="display:none;">

                        <a href="#" class="flag-CN"><em></em>中国 +86</a>

                          <a href="#" class="flag-AL"><em></em>阿尔巴尼亚(shqiperia) +355</a>

                          <a href="#" class="flag-DZ"><em></em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>

                          <a href="#" class="flag-AF" data-code="+93-"><em>&nbsp;</em>阿富汗(Republic of Afghanistan) +93</a>

                          <a href="#" class="flag-AR" data-code="+54-"><em>&nbsp;</em>阿根廷(Argentina) +54</a>

                          <a href="#" class="flag-AE" data-code="+971-"><em>&nbsp;</em>阿拉伯联合大公国(The United Arab Emirates) +971</a>

                          <a href="#" class="flag-AW" data-code="+297-"><em>&nbsp;</em>阿鲁巴(Aruba) +297</a>
                    </div>

                </dd>
            </dl>
            




            <dl class="regForm-item">
                <!--输入框前文本-->
                <dt class="regForm-title">
                    <span class="txt-impt">*</span>验证码
                </dt>

                <dd class="regForm-ct">
                    <!--请输入文本框-->
                    <input type="text" class="ipt">

                    <img class="vCode" style="cursor:pointer;" src="statics/images/call.jpg" alt="验证码" width="120" height="50">

                    <a id="vcodeA" href="#" class="switchvCode">看不清楚？换张图片</a>
                    
                    
                  

                    <!--请输入提示-->
                    <div class="tip">
                        <span class="txt-tips">请填写图片中的字符，不区分大小写</span>
                    </div>

                    <div class="btns">
                        <a href="#" class="btn" onclick="">
                            <strong>免费获取验证码</strong></a>
                    </div>

                </dd>
            </dl>

              <dl class="regForm-item">
                    <!--输入框前文本-->
                    <dt class="regForm-title">
                        <span class="txt-impt">*</span>短信验证码
                    </dt>

                    <dd class="regForm-ct">
                        <!--请输入文本框-->
                        <input type="text" class="ipt" style="width:322px;">
                        
                     

                        <!--请输入提示-->
                        <div class="tip">
                            <span class="txt-tips">请查收手机短信，并填写短信中的验证码</span>
                        </div>

                    </dd>
                </dl>
            


            <dl class="regForm-item">
                <dd class="regForm-ct">
                    <label></label><input type="checkbox" checked="checked" > <sapn style="font-size:12px;">同意</sapn><a href="#">"服务条款"</a><span style="font-size:12px;">和</span><a href="#" >"隐私权相关政策"</a>
                   
                </dd>
            </dl>

        
           <dl class="regForm-item">
                <dd class="regForm-ct">
                    <a id="mainRegA" href="" onclick="" class="btnReg">立即注册</a>
                    <a id="mainRegA_d" href="#" class="btnRegDisable" style="display:none">立即注册</a>
                </dd>
            </dl>

          </div>




              <!--注册VIP邮箱-->
              <div class="regForm" id="tab2" style="display:none;">

                <dl class="regForm-item">
                    <!--输入框前文本-->
                    <dt class="regForm-title">
                        <span class="txt-impt">*</span>邮件地址
                    </dt>

                    <dd class="regForm-ct">
                        <!--请输入文本框-->
                        <input type="text" class="ipt">
                        <strong style="font-weight: bold;font-size: 14px;">@</strong>
                        <select>
                            <option selected="selected">163.com</option>
                            <option>126.com</option>
                            <option>yeah.yet</option>
                        </select>

                        <!--请输入提示-->
                        <div class="tip">
                            <span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
                        </div>

                    </dd>
                </dl>

                
                 <dl class="regForm-item">
                                <!--输入框前文本-->
                <dt class="regForm-title">
                    <span class="txt-impt">*</span>密码
                </dt>

                <dd class="regForm-ct">
                    <!--请输入文本框-->
                    <input type="text" class="ipt" style="width:322px;">
                    
                 

                    <!--请输入提示-->
                    <div class="tip">
                        <span class="txt-tips">6~6个字符，区分大小写</span>
                    </div>

                </dd>
            </dl>

                <dl class="regForm-item">
                    <!--输入框前文本-->
                    <dt class="regForm-title">
                        <span class="txt-impt">*</span>确认密码
                    </dt>

                    <dd class="regForm-ct">
                        <!--请输入文本框-->
                        <input type="text" class="ipt" style="width:322px;">
                        
                     

                        <!--请输入提示-->
                        <div class="tip">
                            <span class="txt-tips">请再次填写密码</span>
                        </div>

                    </dd>
                </dl>

                
                <dl class="regForm-item">
                    <!--输入框前文本-->
                    <dt class="regForm-title">
                        <span class="txt-impt">*</span>手机号码
                    </dt>

                    <dd class="regForm-ct">
                        <!--请输入文本框-->
                        <input id="phone" type="text" class="ipt" style="width:286px;font-size:14px;font-weight:bold;padding-left:40px;" value="+86">
                        
                 

                     
                        <div class="itl">
                            <div class="itl-flag">
                                <em>&nbsp;</em>
                            </div>
                        </div>

                        <!--请输入提示-->
                        <div class="tip">
                            <span class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</span>
                        </div>

                        <!--下拉表选项-->
                        <div class="itlSelect" style="display:none;">

                            <a href="#" class="flag-CN"><em></em>中国 +86</a>

                              <a href="#" class="flag-AL"><em></em>阿尔巴尼亚(shqiperia) +355</a>

                              <a href="#" class="flag-DZ"><em></em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>

                              <a href="#" class="flag-AF" data-code="+93-"><em>&nbsp;</em>阿富汗(Republic of Afghanistan) +93</a>

                              <a href="#" class="flag-AR" data-code="+54-"><em>&nbsp;</em>阿根廷(Argentina) +54</a>

                              <a href="#" class="flag-AE" data-code="+971-"><em>&nbsp;</em>阿拉伯联合大公国(The United Arab Emirates) +971</a>

                              <a href="#" class="flag-AW" data-code="+297-"><em>&nbsp;</em>阿鲁巴(Aruba) +297</a>
                        </div>

                    </dd>
                </dl>
                




                <dl class="regForm-item">
                    <!--输入框前文本-->
                    <dt class="regForm-title">
                        <span class="txt-impt">*</span>验证码
                    </dt>

                    <dd class="regForm-ct">
                        <!--请输入文本框-->
                        <input type="text" class="ipt">

                        <img class="vCode" style="cursor:pointer;" src="statics/images/call.jpg" alt="验证码" width="120" height="50">

                        <a id="vcodeA" href="#" class="switchvCode">看不清楚？换张图片</a>
                        
                        
                      

                        <!--请输入提示-->
                        <div class="tip">
                            <span class="txt-tips">请填写图片中的字符，不区分大小写</span>
                        </div>

                        <div class="btns">
                            <a href="#" class="btn" onclick="">
                                <strong>免费获取验证码</strong></a>
                        </div>

                    </dd>
                </dl>

                  <dl class="regForm-item">
                        <!--输入框前文本-->
                        <dt class="regForm-title">
                            <span class="txt-impt">*</span>短信验证码
                        </dt>

                        <dd class="regForm-ct">
                            <!--请输入文本框-->
                            <input type="text" class="ipt" style="width:322px;">
                            
                         

                            <!--请输入提示-->
                            <div class="tip">
                                <span class="txt-tips">请查收手机短信，并填写短信中的验证码</span>
                            </div>

                        </dd>
                    </dl>
                


                <dl class="regForm-item">
                    <dd class="regForm-ct">
                        <label></label><input type="checkbox" checked="checked" > <sapn style="font-size:12px;">同意</sapn><a href="#">"服务条款"</a><span style="font-size:12px;">和</span><a href="#" >"隐私权相关政策"</a>
                       
                    </dd>
                </dl>

            
               <dl class="regForm-item">
                    <dd class="regForm-ct">
                        <a id="mainRegA" href="" onclick="" class="btnReg">立即注册</a>
                        <a id="mainRegA_d" href="#" class="btnRegDisable" style="display:none">立即注册</a>
                    </dd>
                </dl>

              </div>



         	  </div>

         	<!--内容区域右边区域-->
         	<div class="mainBody-side">
         		<div class="regExt">
         			<img src="statics/images/reg_master.gif">
         		</div>

         		
         	</div>

         </div>

    </section>


    <footer class="footer" style="height:80px">
    <a href="#" >关于网易</a>&nbsp;&nbsp;<a href="#" >关于网易免费邮</a>&nbsp;&nbsp;<a  href="#" >邮箱官方博客</a>&nbsp;&nbsp;<a  href="#" >客户服务</a>&nbsp;&nbsp;<a  href="#" >隐私政策</a>&nbsp;&nbsp;|&nbsp;&nbsp;网易公司版权所有&nbsp;©&nbsp;1997-<script src=""></script>2018<br>数据来源：艾媒咨询《2015-2018中国个人邮箱行业研究报告》
</footer>

<script type="text/javascript" src="statics/js/jquery.js"></script>

 <script type="text/javascript">

     function itlSelect(){

        /*1.找到下拉框里面的<a>标签*/
        // var links = document.querySelectorAll('.itlSelect a');
        
        /*2.给找到的a标签 绑定点击事件*/
        // for(var i=0;i<links.length;i++){
        //     links[i].addEventListener('click',function(e){/*为事件添加函数e*/
        //         var a =e.target;
        //         /*获取a标签中的文本内容*/
        //         var txt=a.innerText;
        //         /*获取a标签的class类名*/
        //         var cls=a.className;

        //         /*获取+号在文本里面的位置*/

        //         /*截取字符串，获取“地区编码值”*/
        //         var area =txt.substr(txt.indexOf("+"), txt.length -  txt.indexOf("+"));

        //         /*设置输入框的 地区编码值*/
        //         document.querySelector("#phone").setAttribute("value",area);

        //         /*设置input输入框的国旗标志*/
        //         var p = document.querySelector('.itl-flag');
        //         p.className = " itl-flag " +cls;


        //         // console.log(area +"--" + cls);
        //     })
        // }
         

        $(".itlSelect a").on("click",function(e){
              
              var txt=$(this).text();

              //截取文本的起始位置，加号的起始位置，用文本的长度减去加号的起始位置
              var area =txt.substr(txt.indexOf("+"), txt.length -  txt.indexOf("+"));

              // $("#phone").attr("value",area);
              $("#phone").val(area);

              $(".itl-flag").attr("class"," itl-flag " + $(this).attr("class"));

        })



  
    }
     



     function switchFlag(){

        // var flag = document.querySelector(".itl");
        // flag.addEventListener("click",function(e){
        //     var d = e.target/*是谁响应点击事件*/

        //     var panel = document.querySelector(".itlSelect");

        //     /*三元运算符。也可以用if...else...代替*/
        //     panel.style.display==="none"? panel.style.display="block":panel.style.display="none";

        // });
        

      $(".itl").on("click",function(e){
        console.log("ddf");
        // $(".itlSelect").hide();//hide();show();设置下拉的显示和隐藏
        // $(".itlSelect").show();
        $(".itlSelect").toggle();//设置下拉的显示和隐藏

      })
       
            
        
     }    


     function switchTab(){

        var tabs = document.querySelectorAll(".regTabs ul li a");
        var ul = document.querySelector(".regTabs ul");

        for(var i=0;i<tabs.length;i++){
            // console.log(i);/*调试for循环是否运行*/

            tabs[i].index = i;
            /*添加索引值*/

            tabs[i].addEventListener("click",function(e){
                var item = e.target;
                console.log(item.index);

                ul.style.background="url(statics/images/tab.jpg) 0 -"+item.index*56+"px";
                 
                 /*点击的时候把黑色字体变成白色，满足用户体验*/
                for(j=0;j<tabs.length;j++){
                    tabs[j].style.color="#000";

                }
                item.style.color="#fff";
                

            });

            // console.log(tabs);




        }

     } 

  

switchFlag();

itlSelect();

switchTab();



 </script>
</body>
</html>